<template>
    <!-- pages/parkDetail/parkDetail.wxml -->

    <view class="detail">
        <view class="topcard">
            <image src="/static/pages/parkDetail/img/park.png"></image>
            <text class="top-header">{{ datas.parkingName || '--' }}</text>
        </view>
        <view>
            <view class="tab-card">
                <view :class="'tab-left ' + (active == 0 ? 'selected' : '')" @tap="onchangeTab" data-data="0" v-if="filters.indexOf(datas.supportBusiness, 1)">
                    单次停车预约
                    <view v-if="active == 0" class="tab-line"></view>
                </view>
                <view
                    :class="'tab-right ' + (active == 1 ? 'selected' : '')"
                    @tap="onchangeTab"
                    data-data="1"
                    v-if="filters.indexOf(datas.supportBusiness, 2) || filters.indexOf(datas.supportBusiness, 3)"
                >
                    包月租车位
                    <view v-if="active == 1" class="tab-line"></view>
                </view>
            </view>
            <!-- <van-tabs active="{{ active }}" bind:change="onchangeTab" id="tabs">
        <van-tab title="单次停车预约" wx:if="{{filters.indexOf(datas.supportBusiness,1)}}"> -->
            <view v-if="active == 0">
                <view class="notice-bar">
                    <van-notice-bar id="notice1" background="#FFF7EB" :text="rules1" speed="30">
                        <view slot="left-icon">
                            <image src="/static/pages/parkDetail/img/tip.png" class="img-tip"></image>
                        </view>
                    </van-notice-bar>
                </view>
                <view v-if="list1 && list1.length > 0">
                    <view v-for="(item, index) in list1" :key="item.spaceNo">
                        <view class="card" @tap="reservePark" :data-data="item">
                            <view class="card-header">
                                <view class="card-header-text">
                                    <span style="padding-right: 10rpx">{{ item.spaceNo }}</span>
                                    <span>{{ datas.parkingName }}</span>
                                </view>
                                <view class="parkopen">{{ item.parkingRequire == 1 ? '限小区居民' : '对公众开放' }}</view>
                                <view class="card-header-icon">
                                    <view v-if="item.isOrder == 1">
                                        <image src="/static/pages/parkDetail/img/tag.png" />
                                        <view class="card-header-icon-text">已被预约</view>
                                    </view>
                                    <view v-else-if="item.isMonthOrder >= item.spaceSum">
                                        <image src="/static/pages/parkDetail/img/tag.png" />
                                        <view class="card-header-icon-text">已被包月</view>
                                    </view>
                                </view>
                            </view>
                            <view>
                                <view class="card-body">
                                    <view>
                                        <view :class="'card-body-l-t ' + (filters.toFixN(item.evaluate, 0) < 4 ? 'yellow-rate' : 'red-rate')" v-if="!item.evaluate">
                                            <image
                                                :src="filters.toFixN(item.evaluate, 0) < 4 ? './img/yellowstar1.png' : './img/redstar1.png'"
                                                v-for="(item, index1) in filters.toFixN(item.evaluate, 0)"
                                                :key="index1"
                                            ></image>
                                            <image
                                                src="/static/pages/parkDetail/img/graystar.png"
                                                v-for="(item, index1) in 5 - filters.toFixN(item.evaluate, 0)"
                                                :key="index1"
                                            ></image>
                                            <text>{{ filters.toFixN(item.evaluate, 2) || '暂无评分' }}</text>
                                        </view>
                                        <view v-else style="font-size: 24rpx; color: #909090">暂无评分</view>
                                        <view class="card-address">{{ datas.address }}</view>
                                    </view>
                                    <view class="card-body-r">
                                        <view class="card-body-r-lx" @tap.stop.prevent="toNavigate" :data-data="datas">
                                            <image src="../../static/assets/img/lxicon.png" />
                                            <view>{{ filters.toFix1(datas.distance / 1000) }}km</view>
                                        </view>
                                        <view class="card-body-r-p"></view>
                                    </view>
                                </view>
                                <view class="line"></view>
                                <view class="card-book" v-if="item.realTime == '全部时间开放预约'">
                                    <view class="book-all">全部时间开放预约</view>
                                </view>
                                <view class="card-book" v-else>
                                    <view :class="item.isOrder === 1 || item.isMonthOrder > 0 ? 'booked-t' : 'book-t'">共享时间段：</view>
                                    <view class="card-time1">{{ item.tempStartTime }} - {{ item.tempEndTime }}</view>
                                    <view class="card-time2">{{ item.validStartTimeDesc }}-{{ item.validEndTimeDesc }}, {{ item.tempCycleDesc }}</view>
                                    <!-- <view wx:for="{{filters.split(item.realTime)}}" wx:for-item="items" wx:key="index"  class="{{item.isOrder == 1 || item.isMonthOrder > 0  ? 'booked-c' : 'book-c'}}">{{items}}</view> -->
                                    <view class="line2"></view>
                                    <view class="card-tip">可提前24小时预约</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="nopark">
                        <image src="../../static/assets/img/empty.png"></image>
                    </view>
                    <view class="text">暂无数据</view>
                </view>
            </view>
            <!-- </van-tab>
      <van-tab title="包月租车位" wx:if="{{filters.indexOf(datas.supportBusiness,2) || filters.indexOf(datas.supportBusiness,3)}}"> -->
            <view v-if="active == 1">
                <view class="notice-bar">
                    <van-notice-bar id="notice2" background="#FFF7EB" :text="rules2" speed="30">
                        <view slot="left-icon">
                            <image src="/static/pages/parkDetail/img/tip.png" class="img-tip"></image>
                        </view>
                    </van-notice-bar>
                </view>
                <view v-if="list2 && list2.length > 0">
                    <view v-for="(item, index) in list2" :key="index">
                        <view class="card" @tap="monthLyPark" :data-data="item">
                            <view class="card-header">
                                <view class="card-header-text">
                                    <span style="padding-right: 10rpx">{{ item.spaceNo }}</span>
                                    <span>{{ datas.parkingName }}</span>
                                </view>
                                <view class="parkopen">{{ item.parkingRequire == 1 ? '限小区居民' : '对公众开放' }}</view>
                                <view class="card-header-icon">
                                    <view v-if="item.isMonthOrder >= item.spaceSum || item.isOrder == 1">
                                        <image class="img-rent" src="/static/pages/parkDetail/img/tag.png" />
                                        <view class="card-header-icon-text">已出租</view>
                                    </view>
                                </view>
                            </view>
                            <view>
                                <view class="card-body">
                                    <view>
                                        <view :class="'card-body-l-t ' + (filters.toFixN(item.evaluate, 0) < 4 ? 'yellow-rate' : 'red-rate')" v-if="!item.evaluate">
                                            <image
                                                :src="filters.toFixN(item.evaluate, 0) < 4 ? './img/yellowstar1.png' : './img/redstar1.png'"
                                                v-for="(item, index1) in filters.toFixN(item.evaluate, 0)"
                                                :key="index1"
                                            ></image>
                                            <image
                                                src="/static/pages/parkDetail/img/graystar.png"
                                                v-for="(item, index1) in 5 - filters.toFixN(item.evaluate, 0)"
                                                :key="index1"
                                            ></image>
                                            <text>{{ filters.toFixN(item.evaluate, 2) || '暂无评分' }}</text>
                                        </view>
                                        <view v-else style="font-size: 24rpx; color: #909090">暂无评分</view>
                                        <view class="card-address">{{ datas.address }}</view>
                                    </view>
                                    <view class="card-body-r">
                                        <view class="card-body-r-lx" @tap.stop.prevent="toNavigate" :data-data="datas">
                                            <image src="../../static/assets/img/lxicon.png" />
                                            <view>{{ filters.toFix1(datas.distance / 1000) }}km</view>
                                        </view>
                                        <view class="card-body-r-p"></view>
                                    </view>
                                </view>
                                <view class="line"></view>
                                <view class="card-book" v-if="item.startTime == '租赁期限不限'">
                                    <view class="book-t">租赁期限</view>
                                    <view class="book-c">不限</view>
                                </view>
                                <view class="card-book" v-else>
                                    <view class="book-t">共享时间段：</view>
                                    <view class="book-c">{{ item.startChineseTime }}-{{ item.endChineseTime }}</view>
                                    <view class="book-c">{{ item.sumDuraTion }}个月可租</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="nopark">
                        <image src="../../static/assets/img/empty.png"></image>
                    </view>
                    <view class="text">暂无数据</view>
                </view>
            </view>
            <!-- </van-tab>
    </van-tabs> -->
        </view>
        <view v-if="false">
            <map class="map" id="mymap"></map>
        </view>
        <van-toast id="van-toast" />
    </view>
</template>
<script module="filters" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
// import vanNoticeBar from '@vant/weapp/notice-bar/index';
// pages/order/index.js
import { Dialog } from 'vant';
import config from './../../utils/config.js';
import api from './../../utils/api.js';
import util from './../../utils/util.js';
// import Toast from '@vant/weapp/toast/toast';
export default {
    components: {
        // vanNoticeBar
    },
    data() {
        return {
            list1: [],
            list2: [],
            active: 0,
            datas: {
                parkingName: '',
                address: '',
                distance: 0
            },
            //前一页面传参
            rules1: '',
            //临停预约的规则-自行拼接
            rules2: '' //自行拼接
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        const param = JSON.parse(decodeURIComponent(options.param));
        this.setData({
            active: options.type,
            datas: param,
            rules1: param.tempReserveProduct.unitPrice / 100 + '元/小时, ' + param.tempReserveProduct.productDesc
        });
        let text1 = '';
        let text2 = '';

        if (param.productVOs) {
            param.productVOs.map((item) => {
                if (item.type == 1) {
                    text1 = '包整月卡' + item.unitPrice / 100 + '元/月; ';
                } else if (item.type == 2) {
                    text2 = '夜间月卡' + '(' + item.reservationTimeContent + ')' + '   ' + item.unitPrice / 100 + '元/月;';
                }
            });
        }

        this.setData({
            rules2: '包月套餐：' + text1 + text2
        });
        this.getTempList();
        this.getMonthList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {}
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        onchangeTab(e) {
            let data = e.currentTarget.dataset.data;
            this.setData({
                active: data
            });

            if (data == 0) {
                this.getTempList();
            } else if (data == 1) {
                this.getMonthList();
            }
        },

        /**
         * 获取预约列表
         */
        getTempList() {
            let param = {
                parkingCode: this.datas.parkingCode,
                // parkingCode:'faacf829-ff2f-4fe6-a50b-b84a2e31f7b6',
                pageNumber: 1,
                pageSize: 100
            };
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.tempParklotList, param, 'POST', 'application/x-www-form-urlencoded')
                .then((res) => {
                    uni.hideLoading();

                    if (res.success) {
                        this.setData({
                            list1: res.data.content
                        });
                    } else {
                        Toast(res.msg || '接口出错了，请稍后再试');
                    }
                })
                .catch((err) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err || '接口出错了，请稍后再试',
                        icon: 'none'
                    });
                });
        },

        /**
         * 获取包月列表
         */
        getMonthList() {
            let param = {
                parkingCode: this.datas.parkingCode,
                // parkingCode:'faacf829-ff2f-4fe6-a50b-b84a2e31f7b6',
                pageNumber: 1,
                pageSize: 100
            };
            util.request(api.monthlyParklotList, param, 'POST', 'application/x-www-form-urlencoded')
                .then((res) => {
                    if (res.success) {
                        this.setData({
                            list2: res.data.content
                        });
                    } else {
                        Toast(res.msg || '接口出错了，请稍后再试');
                    }
                })
                .catch((err) => {
                    uni.showToast({
                        title: err || '接口出错了，请稍后再试',
                        icon: 'none'
                    });
                });
        },

        /**
         * 去预约车位
         */
        reservePark(e) {
            let data = e.currentTarget.dataset.data;

            if (data.isOrder == 1 || data.isMonthOrder >= data.spaceSum) {
                Toast('该车位已被预约');
            } else {
                data = Object.assign(data, {
                    parkingCode: this.datas.parkingCode,
                    parkingName: this.datas.parkingName,
                    feeRule: '原价' + this.datas.temporaryParkingFees + '元/小时,' + this.datas.freeTime + ',' + this.datas.dayFeeCap,
                    openTime: this.datas.openTime,
                    managementMethod: this.datas.managementMethod,
                    rules1: this.rules1
                });
                let param = encodeURIComponent(JSON.stringify(data));
                uni.navigateTo({
                    url: '../parkSpaceBooking/parkSpaceBooking?param=' + param
                });
            }
        },

        /**
         * 去包月车位
         */
        monthLyPark(e) {
            let data = e.currentTarget.dataset.data;

            if (data.isMonthOrder >= data.spaceSum || data.isOrder == 1) {
                Toast('该车位已出租');
            } else {
                data = Object.assign(data, {
                    parkingCode: this.datas.parkingCode,
                    parkingName: this.datas.parkingName,
                    openTime: this.datas.openTime,
                    managementMethod: this.datas.managementMethod,
                    productVOs: this.datas.productVOs,
                    isAliapy: this.datas.isAlipay,
                    isWechat: this.datas.isWechat
                });
                let param = encodeURIComponent(JSON.stringify(data));
                uni.navigateTo({
                    url: '../monthlyParking/monthlyParking?fix=0&param=' + param
                });
            }
        },

        /**唤起导航 */
        toNavigate(e) {
            this.setLog('NAVIGATION');
            const data = e.currentTarget.dataset.data;
            let param = {
                latitude: Number(data.gmapY),
                longitude: Number(data.gmapX),
                address: data.address
            };
            this.onRunApi(param);
        },

        onRunApi(e) {
            const version = uni.getSystemInfoSync().SDKVersion;
			if(uni.getStorageSync('weixin') == 2){
				jWeixin.miniProgram.navigateTo({
					url: "/pages/map/map?lat=" + e.latitude + '&long=' + e.longitude
				})
			}else{
				// window.location.href = 'http://api.map.baidu.com/marker?location=' + e.latitude + ',' + e.longitude +'&title='+ e.address +'&content=&output=html' //百度
				// window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:' + e.latitude + ',' + e.longitude +';addr:'+ e.address   //腾讯导航
				window.location.href = 'http://uri.amap.com/marker?position=' + e.latitude + ',' + e.longitude +'&name='+ e.address +'&coordinate=gaode&callnative=1'  //高德
			}
			// window.location.href = 'http://api.map.baidu.com/marker?location=' + e.latitude + ',' + e.longitude +'&title='+ e.address +'&content=&output=html' //百度
			// window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:' + e.latitude + ',' + e.longitude +';addr:'+ e.address   //腾讯导航
			// window.location.href = 'http://uri.amap.com/marker?position=' + e.latitude + ',' + e.longitude +'&name='+ e.address +'&coordinate=gaode&callnative=1'  //高德
            // if (util.compareVersion(version, '2.14.0') < 0) {
            //     uni.showToast({
            //         title: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
            //         icon: 'none'
            //     });
            //     return;
            // }

            // const mapCtx = uni.createMapContext('mymap');
            // mapCtx.openMapApp({
            //     latitude: e.latitude,
            //     longitude: e.longitude,
            //     destination: e.address,
            //     complete: (res) => {
            //         console.log(res);
            //     }
            // });
        },

        /**
         * 页面埋点
         */
        setLog(e) {
            let param = {
                operation: e
            };
            util.request(api.setLog, param, 'POST', 'application/x-www-form-urlencoded')
                .then((res) => {
                    if (res.success) {
                        console.log('log');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>
<style>
@import './parkDetail.css';
</style>
